<template>
    <div class="proup" id="checkboxPP">
      <div class="ptem">
        <div class="i2d6">组件类型</div>
        <div class="i4d6">
           <el-select v-model="rel.component" placeholder="请选择">
              <el-option
                v-for="item in compOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </div>
      </div>
      <v-probox-common v-model="rel.property" :tips="false"></v-probox-common>
      <hr>
      <div class="ptem">
        <div class="i3d6">
          <strong>选项内容</strong>
        </div>
        <div class="i3d6 tar">
          <a class="" v-on:click="multi_click">批量编辑</a>
        </div>
      </div>
      <v-probox-option-editor v-model="rel.property.options"></v-probox-option-editor>
      <v-probox-multi-option-editor :optionValue="optionValue" :show="showMultiEditor" v-on:close-editor="closeEditor" v-on:say-options="sayOptions"></v-probox-multi-option-editor>
      <div class="ptem">
        <div class="i6d6">
          <label><input type="checkbox" v-model="rel.property.otherOption.show">添加其他选项</label>
        </div>
      </div>
      <div class="ptem">
        <div class="i2d6">
          <label>自定义标题</label>
        </div>
        <div class="i4d6">
          <input v-model="rel.property.otherOption.title"> 
        </div>
      </div>
      <div class="ptem">
        <div class="i6d6">
          <label><input type="checkbox"  v-model="rel.property.otherOption.required">"其他"选项输入框必填</label>
        </div>
      </div>
      <hr>
      <v-probox-layout v-model="rel.property"></v-probox-layout>
      <!--
      <div class="ptem">
        <div class="i4d6">
          <label>组件排版方式</label>
        </div>
      </div>
      
      <div class="ptem">
        <div class="i6d6">
          <div class="i6d6 btn-group">
            <el-radio-group v-model="rel.property.columnCount" size="mini">
              <el-radio-button label="1">一列</el-radio-button>
              <el-radio-button label="2">两列</el-radio-button>
              <el-radio-button label="3">三列</el-radio-button>
              <el-radio-button label="4">四列</el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </div>
      -->
    </div>
</template>

<script>
import proboxCommon from './libs/pro-box-common'
import proboxLayout from './libs/pro-box-layout'
import proboxOptionEditor from './libs/pro-box-option-editor'
import proboxMultiOptionEditor from './libs/pro-box-multi-editor'

export default{
  props:["rel"],
  components:{
    'v-probox-layout':proboxLayout,
    'v-probox-common':proboxCommon,
    'v-probox-option-editor':proboxOptionEditor,
    'v-probox-multi-option-editor':proboxMultiOptionEditor
  },
  data:function(){
    return {
      showMultiEditor:false,
      optionValue:'',
      compOptions:[{
          value: 'v-checkbox',
          label: '多选'
        },{
          value: 'v-radio',
          label: '单选'
        }]
    }
  },
  methods:{
    filterOption:function(value){
      var newValue = []
      if(value.length > 0){
        for(var i=0;i<value.length;i++){
          if(value[i].label.length>0){
            newValue.push(value[i])
          }
        }
      }
      console.info(newValue)
      return newValue
    },
    sayOptions:function(value){
      this.rel.property.options=this.filterOption(value)
    },
    closeEditor:function(close){
      this.showMultiEditor=close
    },
    multi_click:function(){
      this.optionValue = ''
      for(var i=0;i<this.rel.property.options.length;i++){
        if(i>0){
          this.optionValue += '\n'
        }
        this.optionValue += this.rel.property.options[i].label
      }
      this.showMultiEditor=true
    }
  }
}
</script>

<style>
</style>
